<!--  -->
<template>
  <div style="margin: 20px 0;">
    <el-button style="margin-left: 50px;" size="mini" type="success" v-print="printobj">点击打印</el-button>
    <div id="disposal">
      <div style="text-align: center;margin: 40px 0;">
        <div>广西水利电力职业技术学院</div>
        <div style="font-size: 30px;">补办学生证申请表</div>
      </div>
      <table align="center" border="1" width="800px" height="900px" cellspacing="0">
        <tr align="center" height="50px" cellspacing="0">
          <td width="150px">学号</td>
          <td width="150px" colspan="2">{{ tableData.stuNo }}</td>
          <td>姓名</td>
          <td width="150px" colspan="2">{{ tableData.stuName }}</td>
          <td width="150px" rowspan="3">
            <img :src="imgUrl + tableData.photo" alt="相片" style="width: 100%;height: 150px;">
          </td>
        </tr>
        <tr align="center" height="50px">
          <td>性别</td>
          <td width="50px">{{ tableData.gender }}</td>
          <td>民族</td>
          <td><dict-tag :options="dict.type.rt_nation" :value="tableData.mz" /></td>
          <td>籍贯</td>
          <td>{{ tableData.jg }}</td>
        </tr>
        <tr align="center" height="50px">
          <td>班级</td>
          <td colspan="5">{{ tableData.className }}</td>

        </tr>
        <tr align="center" height="50px">
          <td>出生日期</td>
          <td colspan="2">{{ formatDate(tableData.birthday) }}</td>
          <td>入学时间</td>
          <td colspan="3">{{ formatDate(tableData.enrollmentTime) }}</td>

        </tr>
        <tr align="center" height="50px">
          <td>家庭详细地址</td>
          <td colspan="4">{{ tableData.birthplace }}</td>
          <td>乘火车区间</td>
          <td colspan="2">南宁至{{ tableData.railwayStation }}</td>

        </tr>
        <tr rowspan="2" align="center" height="150px">
          <td>遗失原因说明</td>
          <td colspan="6">
            <div style="padding: 20px 0;">
              {{ tableData.reason }}
            </div>
            <div style="text-align: right;margin: 0 50px 10px 10px">
              申请人签名：
            </div>
          </td>

        </tr>
        <tr align="center" rowspan="2" height="150px">
          <td>辅导员审核意见</td>
          <td colspan="6" style="position: relative;">
            <div style="padding: 20px 0;">
              {{ tableData.fdyCmt }}
            </div>
            <div style="text-align: right;margin: 0 50px 10px 10px">
              辅导员签名：
            </div>
          </td>

        </tr>
        <tr rowspan="2" align="center" height="150px">
          <td>学工处审核意见</td>
          <td colspan="6" style="position: relative;">
            <img style="position: absolute; bottom: 0;width: 150px;right: 50px;opacity: 0.2;" src="../../../assets/logo/logo.png" alt="">
            <div style="padding: 20px 0;">
              {{ tableData.jwcCmt }}
            </div>
            <div style="text-align: right;margin: 0 50px 10px 10px;">
              签字（盖章）：
            </div>
          </td>

        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { getStuIdReissue } from "@/api/routine/stuIdReissue";
export default {
  name: 'studentIdPrinting',
  dicts: ['rt_nation'],
  data() {
    return {
      tableData: [],
      imgUrl: process.env.VUE_APP_BASE_API,
      //打印
      printobj: {
        id: 'disposal',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
    }
  },
  watch: {
    "$route.query.listId": {
      immediate: true,
      handler() {
        this.reset()
        if (this.$route.query.listId !== undefined) {
          if (this.$route.query.listId !== null) {
            this.getStuIdReissue(this.$route.query.listId)
          }
          this.reset()
        } else {
          this.reset()
        }
      }
    }
  },
  methods: {
    getStuIdReissue(id) {
      getStuIdReissue(id).then(response => {
        this.tableData = response.data;
      });
    },
    reset() {
      this.tableData = []
    },
    //时间数据2024-05-24转成年月日
    formatDate(dateStr) {
      // 创建一个 Date 对象
      const date = new Date(dateStr);

      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        return '无效的日期';
      }

      // 提取年月日，并添加前缀和后缀
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = date.getDate().toString().padStart(2, '0'); // 使用 padStart 添加前导零

      // 拼接成 "年月日" 格式
      return `${year}年${month}月${day}日`;
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  // 离开当前页面时执行代码
  destroyed() {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
<style @media="print">
@page {
  size: auto;
  margin: 5mm;
}

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>
